<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指标查询</title>
    <link rel="stylesheet" href="/layui/v11/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header"></div>
                <div class="layui-card-body">
                    <form class="layui-form">
                        <div class="layui-input-inline">
                            <label for="zbSelect"></label>
                            <select id="zbSelect" lay-search="">
                                <option value="">请选择或搜索指标名称</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <button type="button" class="layui-btn" lay-submit="" lay-filter="search">查询</button>
                        </div>
                    </form>
                    <table class="layui-table" id="zb_table" lay-filter="zb_table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/main/jquery.js"></script>
<script src="/layui/v11/layui.js"></script>
<script src="/js/core.util.js"></script>

<script th:inline="none">
    //获取token
    const token = CoreUtil.getData("access_token");
    //地址栏转义token中的#号
    const tokenQuery = token.replace("#", "%23");
    let tableIns1;
    const table = layui.table;
    const form = layui.form;
    const layer = layui.layer;
    const $ = jQuery = layui.jquery;
    const laydate = layui.laydate;

    layui.use(['table', 'layer', 'laydate'], function () {

        // 页面初始化时直接调用一次
        renderTable();

        // 渲染表格（第一次也用 search 逻辑，不直接写 cols）
        function renderTable() {
            //加载table
            let colsLoaded = false;
            // 全局变量缓存列
            let currentCols = null; // 全局变量缓存列
            tableIns = table.render({
                elem: '#zb_table',
                id: 'zb_table_id',                 // ✅ 加个 id，后面 reload 用它更稳
                url: '/zbcx/queryZbcx',
                method: 'POST',
                contentType: 'application/json',
                headers: {authorization: token},
                page: true,
                where: {code: '1'},
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                // 只保留状态码映射，其他让 parseData 处理
                response: {
                    statusName: 'code',
                    statusCode: 0
                },
                // ✅ 关键：把 { data: { count, data, columnsJson } } 拍平给 Layui
                parseData: function (res) {
                    var body = (res && res.data) ? res.data : {};
                    var rows = Array.isArray(body.data) ? body.data : [];
                    var total = body.count || 0;

                    // 把 columnsJson 顺带传给 done（放在自定义字段上）
                    return {
                        code: res.code,
                        msg: res.msg || '',
                        count: total,
                        data: rows,
                        __columnsJson: body.columnsJson  // ✅ 供 done 使用
                    };
                },
                cols: [[]],
                done: function (res, curr, count) {
                    // 注意：这里的 res.data 已经是 “拍平后”的数组了
                    if (!colsLoaded && res.__columnsJson) {
                        try {
                            // 你的后端有时是字符串，有时嵌了 LAY_KEY，就都兼容一下
                            var raw = res.__columnsJson.LAY_KEY || res.__columnsJson;
                            var newCols = (typeof raw === 'string') ? JSON.parse(raw) : raw;
                            if (!Array.isArray(newCols[0])) newCols = [newCols];
                            colsLoaded = true; // ✅ 先置位，避免 reload 后再次进入死循环
                            currentCols = newCols; // ✅ 缓存列
                            // ✅ 重新请求一次数据（保留分页 & 条件）
                            table.reload('zb_table_id', {
                                cols: newCols,
                                page: {curr: 1},
                                where: {code: "1"}
                            });
                        } catch (e) {
                            console.error('解析列数据失败:', e);
                        }
                    }
                }
            });
        }

        //查询
        form.on('submit(search)', function () {
            let value = $("#zbSelect").val();
            value = (value == null) ? "1" : value;

            // 直接发 ajax 请求获取数据和列
            $.ajax({
                url: '/zbcx/queryZbcx',
                method: 'POST',
                contentType: 'application/json',
                headers: {authorization: token},
                data: JSON.stringify({code: value, page: 1, limit: 20}),
                success: function (res) {
                    let body = res.data || {};
                    let rows = Array.isArray(body.data) ? body.data : [];
                    console.log(body)
                    let rawCols = body.columnsJson.LAY_KEY || body.columnsJson;
                    let cols = (typeof rawCols === 'string') ? JSON.parse(rawCols) : rawCols;

                    // 如果第一项不是数组，说明是一维数组，需要包成二维
                    if (!Array.isArray(cols[0])) {
                        cols = [cols];
                    }

                    // ✅ 方法 2：替换 templet 标识成函数（支持 formatDate:列名）
                    var templetFuncs = {
                        formatDate: function (d, field) {
                            const val = d[field];  // 动态取字段值
                            if (!val) return "";
                            try {
                                if (/^\d{4}-\d{2}-\d{2}$/.test(val)) {
                                    return val; // 已经是标准日期字符串
                                }
                                const date = /^\d+$/.test(val) ? new Date(Number(val)) : new Date(val);
                                return layui.util.toDateString(date, "yyyy-MM-dd");
                            } catch (e) {
                                return val;
                            }
                        }
                    };

                    // 去掉 key，只保留必要属性，并解析 templet
                    cols = cols.map(row => row.map(col => {
                        if (col.templet && typeof col.templet === "string") {
                            // 检查是否是 formatDate:字段名
                            if (col.templet.startsWith('formatDate:')) {
                                const field = col.templet.split(':')[1];
                                col.templet = function(d) {
                                    return templetFuncs.formatDate(d, field);
                                }
                            } else if (templetFuncs[col.templet]) {
                                // 兼容原来的直接函数名
                                col.templet = templetFuncs[col.templet];
                            }
                        }
                        return {
                            field: col.field,
                            title: col.title,
                            width: col.width,
                            align: col.align,
                            sort: col.sort || false,
                            templet: col.templet // 如果有函数就保留
                        };
                    }));

                    table.reload('zb_table_id', {
                        cols: cols,
                        data: rows,
                        where: {code: value},
                        page: {curr: 1, count: body.count || 0}
                    });
                }
            });
        });


        // 指定人下拉选
        CoreUtil.sendPost("/zbcx/queryZbcxSelect", JSON.stringify(null), function (res) {
            let zbList = res.data;
            let ksOptions = '<option value="">请选择指标</option>';
            for (let i = 0; i < zbList.length; i++) {
                ksOptions += '<option value="' + zbList[i].code + '">' + zbList[i].name + '</option>';
            }
            $('#zbSelect').html(ksOptions);
            form.render('select');
        });

    })


</script>

</body>
</html>